@mixin create-theme(
  $ButtonPrimaryBgColor,
  $ButtonPrimaryBdColor,
  $layoutBgColor,
  $layoutBgImage,
  $contentCornerBgColor,
  $menuBorderColor,
  $menuArrowColor,
  $menuArrowHoverColor,
  $menuActiveBgColor,
  $menuPanelBgColor,
  $sidebarBottomColor,
  $sidebarBottomBorderColor,
  $topLayoutMenuActiveBgColor1,
  $topLayoutMenuActiveBgColor2,
  $topLayoutMenuPanelActiveBgColor,
  $horizontalLayoutMenuItemActiveBgColor,
  $horizontalLayoutSubmenuBgColor,
  $horizontalLayoutSubmenuItemActiveBgColor,
  $headerTopRowBgColor: transparent,
  $sidebarBgColor: transparent
) {
  .bk-layout-element {
    background: $layoutBgColor url($layoutBgImage) no-repeat left top;
  }

  .bk-layout-header .header-top-row {
    background: $headerTopRowBgColor !important;
  }

  .bk-layout-menu-tabs-wrapper::after {
    background-color: $contentCornerBgColor !important;
  }

  .bk-layout-sidebar-wrapper {
    background: $sidebarBgColor !important;

    .el-menu {
      background: transparent !important;

      & > .el-menu-item {
        border-bottom: 1px $menuBorderColor solid;
      }

      .el-submenu__icon-arrow {
        color: $menuArrowColor !important;
      }

      .el-menu-item.is-active,
      .el-menu-item:hover,
      .el-menu-item:focus,
      .el-submenu__title.is-active,
      .el-submenu__title:hover {
        background: $menuActiveBgColor !important;
      }

      .el-submenu {
        border-bottom: 1px $menuBorderColor solid;

        &:hover .el-submenu__icon-arrow {
          color: $menuArrowHoverColor !important;
        }
      }

      &.el-menu--popup.el-menu--popup-right-start {
        background-color: $menuPanelBgColor !important;
      }
    }

    .el-footer {
      color: $sidebarBottomColor !important;
      border-top: 1px solid $sidebarBottomBorderColor !important;

      &:hover {
        color: #fff !important;
      }
    }

    &.left-arrow-menu:not(.collapsed) {
      .el-scrollbar__view > .el-menu {
        & > li.el-submenu > div.el-submenu__title {
          font-size: 15px;
          padding-left: 12px !important;
          .svg-icon { font-size: 20px; }

          .el-submenu__icon-arrow {
            right: 8px;
            left: initial;
            transform: rotateZ(90deg);
          }
        }

        & > .el-submenu > ul.el-menu > li.el-menu-item {
          padding-left: 32px !important;
          font-size: 14px;
          line-height: 40px;
          height: 44px;
          color: #d7fdffc7 !important;
          border-bottom: 0 #5699d117 solid;
          .svg-icon { font-size: 16px; }
          &.is-active { color: #fff !important; }
        }

        & > .el-submenu > ul.el-menu {
          padding-bottom: 12px;
        }

        li.el-menu-item {
          padding-left: 12px !important;
          > .svg-icon { font-size: 20px; }
        }

        & > .el-submenu.is-opened div.el-submenu__title .el-submenu__icon-arrow {
          transform: rotateZ(0deg);
        }
      }
    }

    &.left-arrow-menu.collapsed .el-menu .el-submenu__title .svg-icon {
      font-size: 20px !important;
    }

    &.left-arrow-menu.collapsed .el-menu .el-menu-item .svg-icon {
      font-size: 20px !important;
    }
  }

  .bk-layout-top-wrapper {
    .bk-layout-header .top-header-menu-container .top-header-menu .el-menu--horizontal {
      &.el-menu {
        .el-menu-item {
          height: 54px;
        }
      }

      .el-submenu,
      .el-menu-item {
        &:hover {
          background: linear-gradient(180deg, $topLayoutMenuActiveBgColor1, $topLayoutMenuActiveBgColor2) !important;
        }

        .el-submenu__title {
          height: 54px;

          &:hover {
            background: linear-gradient(180deg, $topLayoutMenuActiveBgColor1, $topLayoutMenuActiveBgColor2) !important;
          }
        }

        .el-menu--popup.el-menu--popup-bottom-start {
          background-color: $menuPanelBgColor !important;

          .el-menu-item {
            line-height: 42px;
            height: 44px;

            &:hover {
              background: rgba($topLayoutMenuPanelActiveBgColor, 0.541) !important;
            }

            &.is-active {
              background: rgba($topLayoutMenuPanelActiveBgColor, 0.82) !important;
            }
          }
        }

        &.is-active {
          background: linear-gradient(180deg, $topLayoutMenuActiveBgColor1, $topLayoutMenuActiveBgColor2) !important;
        }
      }
    }
  }

  .bk-layout-horizontal-wrapper {
    .bk-layout-header {
      .header-submenu-row {
        // background: $horizontalLayoutSubmenuBgColor;
        position: fixed;
        z-index: 4;
        left: 50%;
        transform: translate(-50%, 0%);
        border-radius: 8px 8px 0 0;
        padding: 4px 28px;
        bottom: 0;
        background: url("~@/assets/themes/images/fot_nav_bj.png") no-repeat center bottom;
        background-size: 100% 100%;

        &::after {
          position: absolute;
          z-index: 5;
          left: -150%;
          bottom: 0;
          height: 5px;
          width: 400%;
          content: "";
          pointer-events: none;
          background: linear-gradient(90deg, #091fa900, #216bef, #216bef, #091fa900);
        }

        .top-submenu-item {
          font-size: 16px;
          border-radius: 16px;
          & .svg-icon { font-size: 20px; }

          &:hover {
            background: rgba($horizontalLayoutSubmenuItemActiveBgColor, 0.651);
          }

          &.visited {
            background: $horizontalLayoutSubmenuItemActiveBgColor;
          }

          &.active {
            background: $horizontalLayoutSubmenuItemActiveBgColor;
          }
          &:last-child { margin-right: 0; }
        }
      }

      .header-top-row {
        .menu-area {
          .menu-item {
            &.visited,
            &.active {
              background: linear-gradient(180deg, $horizontalLayoutMenuItemActiveBgColor, $horizontalLayoutSubmenuBgColor) !important;

              &::after,
              &::before {
                background: linear-gradient(180deg, $horizontalLayoutMenuItemActiveBgColor, $horizontalLayoutSubmenuBgColor) !important;
              }
            }
          }
        }
      }
    }
  }

  .el-button--primary {
    background-color: $ButtonPrimaryBgColor;
    border-color: $ButtonPrimaryBdColor;

    &.is-plain {
      border-color: $ButtonPrimaryBdColor;
      background-color: #fff;
      color: $ButtonPrimaryBdColor;

      &:hover {
        background-color: #e6eefc;
        color: $ButtonPrimaryBdColor !important;
      }
    }

    &:hover {
      background-color: rgba($ButtonPrimaryBgColor, 0.8);
      border-color: rgba($ButtonPrimaryBdColor, 0.8);
    }
  }

  .condition-inner-wrapper .form-buttons .el-button.el-button--default,
  .el-button.blue-button.el-button--primary {
    border-color: $ButtonPrimaryBdColor;
    color: $ButtonPrimaryBdColor;
  }
}
